<script lang="ts" setup>
import type { SettlementInfo } from '@/types'
import type { FormInst } from 'nutui-uniapp'
import { useSteps } from '@/composables/useSteps'
import { useApplyStore } from '@/store'

interface Option {
  text: string
  value: string
}

const { licenseInfo, settlementInfo, mer_type } = storeToRefs(useApplyStore())
const { submit } = useSteps('settlement')

const ruleForm = ref<FormInst | null>(null)
// form初始化
const form = ref<SettlementInfo>({
  acctType: '02',
  acctNo: '',
  acctName: '',
  bankName: '',
  managerNo: '',
  managerName: '',
})

if (settlementInfo.value.acctNo) {
  form.value = settlementInfo.value
} else {
  if (mer_type.value === '1') {
    form.value.acctType = '01'
  }
}

// const acctUploader = ref()
// function acctValidator() {
//   return new Promise((resolve) => {
//     acctUploader.value.validate().then((valid: boolean) => {
//       resolve(valid)
//     })
//   })
// }

const options = ref<Option[]>([
  { text: '对私', value: '01' },
  { text: '对公', value: '02' },
])

const rules = {
  // acct: [
  //   { validator: acctValidator, message: '请上传银行卡正面图片' },
  // ],
  acctNo: [
    { required: true, message: '请输入结算账户' },
  ],
  acctName: [
    { required: true, message: '请输入账户名称' },
  ],
  bankName: [
    { required: true, message: '请输入开户行名称' },
  ],
}

// function acctUploaded(value: any) {
//   if (value.type === 'acct') {
//     form.value.acctNo = value.settleAcct
//   }
// }

// 1、小微只允许对私
// 2、个体户对私对公均可，账户类型以校验接口返回的为准，无需上传对私结算卡图片
// 3、企业，事业单位，政府机关三种只允许对公
// 4、其他组织（民办非企业单位登记证书，社会团体法人证书，基金会法人登记证书）三种证件类型的时候，只允许为对公账户
// 5、其他组织（剩余其他证照类型）对公对私均可，账户类型以校验接口返回的为准，无需上传对私结算卡图片

function acctValidated(data: any) {
  let only02 = false
  if (mer_type.value === '2' || mer_type.value === '4' || mer_type.value === '5') {
    only02 = true
  } else if (mer_type.value === '6') {
    if (licenseInfo.value.certType === '05' || licenseInfo.value.certType === '07' || licenseInfo.value.certType === '08') {
      only02 = true
    }
  }
  if (data.acctType === '01' && only02) {
    uni.showModal({
      title: '错误',
      content: '当前商户资质仅支持对公账户'
    })
  } else {
    form.value.acctName = data.acctName
    form.value.bankName = data.bankName
    form.value.acctType = data.acctType
  }
}

function managerValidated(data: any) {
  if (data) {
    form.value.managerName = data.managerName
  } else {
    form.value.managerName = ''
  }
}

function clickSubmit() {
  // 表单校验
  ruleForm.value?.validate().then(({ valid }) => {
    if (valid) {
      // 先存数据
      settlementInfo.value = form.value
      submit()
    }
  })
}
</script>

<template>
  <div class="input">
    <steps-bar />
    <nut-form ref="ruleForm" :model-value="form" :rules="rules">
      <nut-form-item v-if="mer_type === '02'" label="账户类型" required prop="acctType">
        <option-select v-model="form.acctType" title="账户类型" :options="options" inputAlign="right" />
      </nut-form-item>
      <!-- <nut-form-item
        v-if="form.acctType === '01'"
        label="银行卡正面"
        prop="acct"
        required
      >
        <acct-upload ref="acctUploader" @uploaded="acctUploaded" />
      </nut-form-item> -->
      <acct-validation v-model:acct="form.acctNo" v-model:name="form.acctName" :acct-type="form.acctType"
        @validated="acctValidated" inputAlign="right" />
      <nut-form-item label="开户行名称" prop="bankName" required>
        <nut-input v-model="form.bankName" class="nut-input-text" placeholder="请输入开户行名称" type="text" disabled
          input-align="right" placeholder-style="color:#ccc;" max-length="50" />
      </nut-form-item>
      <nut-form-item label="客户经理工号" prop="managerNo">
        <manager-validation v-model="form.managerNo" @validated="managerValidated" inputAlign="right" />
      </nut-form-item>
      <nut-form-item label="客户经理姓名" prop="managerName">
        <nut-input v-model="form.managerName" class="nut-input-text" placeholder="请输入客户经理姓名" type="text" disabled
          input-align="right" placeholder-style="color:#ccc;" max-length="20" />
      </nut-form-item>
    </nut-form>
    <div class="button">
      <nut-button type="primary" custom-class="login-btn shake_o" block @click="clickSubmit">提交</nut-button>
      <!-- <nut-button type="primary" block @click="clickSubmit">提交</nut-button> -->
    </div>
  </div>
</template>

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "商户进件",
    "backgroundColorContent": "#f1f1f1"
  }
}
</route>

<style lang="sass" scoped>
.input
  .loader
    width: 210px
    display: flex
    justify-content: space-between
  .button
    margin: 40px 20px

:deep(.nut-form-item__label)
  display: flex!important
  flex-direction: row!important
  min-width: 100px!important
:deep(.login-btn)
  width: 100%
  height: 85rpx
  margin-top: 30rpx
  background-color: #2196F3!important

:deep(.nut-textarea__textarea)
  text-align: right!important

:deep(.nut-step-main)
  margin-top: 20rpx
</style>
